<template>
	<div id="register">
		<div class="row">
			<div class="col-md-12 position-relative">
				<div class="position-absolute" style="top: 1.5rem;left: 15px;">
					<h4><img data-id="7528" data-aid="26" style="height: 46px;width: 46px;" src="http://pic.sfont.cn/font/26/7528.svg"><img data-id="6237" data-aid="26" style="height: 46px;width: 46px;" src="http://pic.sfont.cn/font/26/6237.svg"><img data-id="6ce8" data-aid="26" style="height: 46px; width: 46px;" src="http://pic.sfont.cn/font/26/6ce8.svg"><img data-id="518c" data-aid="26" style="height: 46px; width: 46px;" src="http://pic.sfont.cn/font/26/518c.svg"></h4>
				</div>
				<img class="mx-auto my-3 d-block" src="../assets/logo.png" alt="">
			</div>
			<div class="col-md-12">
				<form @submit.prevent='onSubmit'>
					<div class="form-group">
						<label for="">用户名/邮箱：
							<small class="text-danger" 
							v-remind="email">
							</small>
						</label>
						<input type="text" 
						class="form-control" 
						v-model='email' 
						v-verify="email" 
						placeholder="邮箱地址">
					</div>
					<div class="form-group">
						<label for="">密码：
							<small class="text-danger" 
							v-remind="password"></small>
						</label>
						<input type="password" 
						class="form-control" 
						v-model='password' 
						v-verify="password" 
						placeholder="密码">
					</div>
					<div class="form-group">
						<label for="">确认密码：
							<small class="text-danger" 
							v-remind="comfirmpassword">
							</small>
						</label>
						<input type="password" 
						class="form-control"
						v-model='comfirmpassword' 
						v-verify="comfirmpassword" 
						placeholder="确认密码">
					</div>
					<div class="form-group mt-4">
						<button type="submit" class="btn btn-success btn-block">{{registTip}}</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</template>

<script type="text/javascript">
	export default{
		data(){
			return {
				email:'',
				password:'',
				comfirmpassword:'',
				registTip:'点击注册',
			}
		},
		verify:{
			email:['required','email'],
			password:['required',{minLength:6,message:'密码不得小于6位'}],
			comfirmpassword:['required',{
				test:function(){
					if (this.password !== this.comfirmpassword) {
						return false;
					}else{
						return true;
					}
				},
				message:"两次输入的密码不一致！"
			}]
		},
		methods:{
			hasuser(){
			    return new Promise((resolve,reject)=>{
			    	this.$http.get(`https://d.apicloud.com/mcm/api/pizzaApp/count?filter={"where":{"username":"${this.email.trim()}"}}`)
			    	.then((res) =>{
		         		// console.log(res.data.count); 
		         		if (!res.data.count) {
		         			resolve('ok');
		         		}else{
		         			resolve('no');
		         		}
		         	})
			    })
			},
			onSubmit(){
				let email = this.email.trim();
				let password = this.password.trim();
				let comfirmpassword = this.comfirmpassword.trim();
				
				const arr = [email,password,comfirmpassword];
				this.hasuser().then(res=>{
					if (res === 'ok') {
						console.log('可以开始执行注册流程了');
						if (this.$verify.check()) {
							console.log('register...');
							// return false;
							const formdata = {
								username:email,
								password:password,
								comfirmpassword:comfirmpassword
							}
							this.$http.post('https://d.apicloud.com/mcm/api/pizzaApp',formdata)
							    .then((data)=>{
								console.log(data.data);
								this.registTip = `注册成功,2s后跳转...`;
								setTimeout(()=>{
									this.$router.push({name:'loginLink'});
								},2000)
							}).catch((err)=>{
								console.log(err);
							})
						}
					}else{
						this.registTip = '此用户已注册!';
						setTimeout(()=>{
							this.registTip = '点击注册';
						},2000)

					}
				});
				// console.log(this.$verify.$errors);
				
				

			}
		}
	};
</script>

<style type="text/css" lang="scss">
    input.danger{
    	boder:1px solid green;
    }
	input.form-control:focus{
		box-shadow: 0 0 0 0;
	}
</style>